<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
    <link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .masonry {
            column-count: 4;
            column-gap: 0;
            width: 1200px;
            margin: 25px auto;
        }

        .item {
            padding: 2px;
            position: relative;
            z-index: 0;
            /*counter-increment: item-counter;*/
            transition: all 0.5s;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;

        }

        .item img {
            display: block;
            width: 100%;
            height: auto;
        }

        .item::after {
            position: absolute;
            display: block;
            top: 2px;
            left: 2px;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            background-color: #000;
            color: #fff;
            /*content: counter(item-counter);*/
        }

        .item:hover{
            z-index: 9999;
            transform:scale(1.2);
            /*-webkit-transform:scale(1.2);*/
            /*-moz-transform:scale(1.2);*/
            /*-o-transform:scale(1.2);*/
            /*-ms-transform:scale(1.2);*/
        }

        .dialog{
            z-index: 99999;
        }
    </style>
</head>
    <body>
        <div id="app">
            <div class="header">
                <!-- 设置logo -->
                <div class="logo">
                    <img src="image/logo.png">
                </div>
                <!-- 设置菜单 -->
                <div class="auth">
                    <ul>
                        <li><a href="#" id="cartlink" @click="cartdetail()">购物车</a></li>
                        <!--				<li><a href="#" id="cartlink" @click="visible = true">购物车</a></li>-->
                        <!--				<li><a href="#" id="cartlink" @click="cartdetail();visible=true">购物车</a></li>-->
                        <li><a href="/register.html">注册</a></li>
                        <li><a href="#" id="loginlink" @click="logindetail()">登录</a></li>
                    </ul>
                </div>
            </div>

            <div class="content">
                <table style="width:300px;position:absolute;margin-top:200px;margin-left: 400px;background: #00a1d9">
                    <th scope="col">外观</th><th scope="col">名称</th><th scope="col">价格</th>
                    <tr v-for="item in cart">
                        <td>{{item.itemname}}</td>
                        <td><img :src="item.img"/></td>
                        <td>{{item.price}}</td>

                    </tr>
                    <!--@TODO 总价-->
                    <tr>
<!--                        <el-button  type="button" id="orderbutton" @click="order()">确认</el-button>-->
                        <td> <button>sdsd</button></td>

                    </tr>
                </table>
            </div>

        </div>




        <script>
            new Vue({
                el: '#app',
                data () {
                    return {
                        info: null
                    }
                },
                methods: {
                    order() {
                        axios
                            .post('/order/')
                            .then(response => (this.info = response.data))
                        if(info>0){
                            this.$message({
                                message: '订单生成成功',
                                type: 'success'
                            });

                        }
                        else {
                            this.$message.error('订单生成失败');
                        }
                    }
                }
            })
        </script>



    </body>
</html>
